<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bangumi Open Source</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      *::-webkit-scrollbar {
        display: none;
      }
      body {
        overflow: hidden;
        background: #000;
      }
    </style>
  </head>
  <body>
    <div style="position: relative; width: 280px; height: 150px">
      <canvas
        id="canvas_matrix"
        style="
          display: block;
          background-color: transparent;
          position: absolute;
          left: 0;
          top: 0;
          width: 280px;
          height: 150px;
        "
        width="300"
        height="150"
        class=""
      ></canvas>
      <canvas
        id="canvas_matrix_2"
        style="
          display: block;
          background-color: transparent;
          position: absolute;
          left: 0;
          top: 0;
          width: 280px;
          height: 150px;
          border-radius: 15px;
        "
        width="300"
        height="150"
        class=""
      ></canvas>
      <div
        style="
          font-family: Courier New, serif;
          position: absolute;
          width: 100%;
          height: 100%;
          text-align: center;
          top: 45%;
          font-size: 20px;
          color: #fff;
          text-shadow: 0px 0px 15px #00ff00, 0px 0px 9px #56b000, 0px 0px 15px #006400,
            0px 0px 5px #006400;
        "
        class=""
      >
        Bangumi Open Source
      </div>
    </div>
    <script>
      var t = document.getElementById('canvas_matrix'),
        n = t.getContext('2d'),
        i = document.getElementById('canvas_matrix_2'),
        s = i.getContext('2d'),
        a = t.width,
        h = t.height,
        r = [
          'b',
          'a',
          'n',
          'g',
          'u',
          'm',
          'i',
          'o',
          'p',
          'e',
          'n',
          's',
          'o',
          'u',
          'r',
          'c',
          'e'
        ],
        e = 10,
        u = [],
        o = 10,
        c = 10,
        f = a / o
      t.width = i.width = a
      t.height = i.height = h
      function m(t, i) {
        return Math.floor(Math.random() * (i - t) + t)
      }
      function v(t, i) {
        return Math.random() * (i - t) + t
      }
      function d(t, i) {
        this.x = t
        this.y = i
      }
      d.prototype.t = function (t) {
        this.value = r[m(0, r.length - 1)].toUpperCase()
        this.speed = v(0.5, 1.5)
        s.fillStyle = 'rgba(255,255,255,0.3)'
        s.font = c + 'px san-serif'
        s.fillText(this.value, this.x, this.y)
        t.fillStyle = '#0F0'
        t.font = c + 'px san-serif'
        t.fillText(this.value, this.x, this.y)
        this.y += this.speed
        if (this.y > h) {
          this.y = v(-100, 10)
          this.speed = v(0.5, 3)
        }
      }
      for (var x = 0; x < f; x++) {
        u.push(new d(x * o, v(-500, 0)))
      }
      var b = function () {
        n.fillStyle = 'rgba(0, 0, 0, 0.05)'
        n.fillRect(0, 0, a, h)
        s.clearRect(0, 0, a, h)
        var t = u.length
        while (t--) {
          u[t].t(n)
          var i = u[t]
        }
        requestAnimationFrame(b)
      }
      b()
    </script>
  </body>
</html>
